<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
</head>

<body>
  <div class="x-body">
    <!-- 搜索 -->
    <div class="layui-row">

      <blockquote class="layui-elem-quote">
        <button class="layui-btn layui-btn-danger" onclick="back()">
          返回
        </button>
        <span class="x-red" style="font-size: 28px;">注意！在当前界面删除用户是真正的删除，请谨慎操作！</span>
      </blockquote>
      <form method="get" class="layui-form layui-col-md12 x-so">


        <span>标题关键字查询：</span>
        <input type="text" name="keywords" placeholder="" autocomplete="off" value="{$keywords}" class="layui-input">
        <button class="layui-btn">
          <i class="layui-icon">&#xe615;</i>
        </button>
      </form>

    </div>


    <xblock>
      <button class="layui-btn layui-btn-danger" onclick="cutAll()">
        <i class="layui-icon"></i>批量删除
      </button>
      <button class="layui-btn layui-btn-normal" onclick="recoveryAll()">
        <i class="layui-icon">&hearts;</i>批量恢复
      </button>

      <span class="x-right" style="line-height:40px">
        共有数据：{$configCount} 条
      </span>
    </xblock>

    <table class="layui-table">
      <thead>
        <tr>
          <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i>
            </div>
          </th>
          <th>配置的标题</th>
          <th>配置的名称</th>
          <th>配置的类型</th>
          <th>配置的值</th>
          <th>操作</th>
      </thead>

      <tbody>
        {foreach $configList as $item}
        <tr>
          <td>
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id="{$item.id}">
              <i class="layui-icon">&#xe605;</i>
            </div>
          </td>
          <td>{$item.title}</td>
          <td>{$item.key}</td>
          {if condition = "$item.type == 'text'"}
          <td>文本类型</td>
          <td>{$item['value']}</td>

          {else /}
          <td>文件类型</td>
          <td>
            <img src="{$item.value}" alt="">
          </td>
          {/if}
          <td>
            <a title="恢复" href="javascript:;" onclick="recoveryOne(`{$item.id}`)">
              <i class="layui-icon"><svg t="1650452441216" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2056" width="16" height="16">
                  <path
                    d="M876.89 535.11c3.22-107.02-35.43-208.89-108.85-286.85-139.4-148.03-365.98-166.35-526.67-50.07l-5.56-57.66c-2.36-24.48-24.16-42.41-48.61-40.07-24.48 2.36-42.43 24.12-40.07 48.61l17.92 185.8a44.52 44.52 0 0 0 17.77 31.48c1.51 1.13 3.07 2.13 4.68 3.04a44.528 44.528 0 0 0 30.61 4.89l178.1-35.47c24.11-4.8 39.77-28.25 34.96-52.39-4.78-24.15-28.22-39.78-52.39-34.96l-81.37 16.2c124.67-87.44 298.4-72.49 405.79 41.7 57.09 60.62 87.16 139.85 84.68 223.08-2.51 83.24-37.26 160.52-97.91 217.62C564.83 867.92 367 862.07 249.25 736.82c-16.83-17.92-45.05-18.76-62.97-1.88-17.89 16.87-18.74 45.06-1.88 62.97 28.36 30.1 60.28 54.83 94.56 74.18 148.83 83.98 341.29 66 472.1-57.18C829 741.5 873.69 642.14 876.89 535.11z"
                    fill="#323333" p-id="2057"></path>
                  <path
                    d="M423.44 378.04c-24.59 0.46-44.16 20.78-43.7 45.37l3.34 178.13c0.46 24.59 20.78 44.16 45.37 43.7l178.13-3.34c24.59-0.46 44.16-20.78 43.7-45.37s-20.78-44.16-45.37-43.7l-133.6 2.51-2.51-133.6c-0.46-24.59-20.77-44.16-45.36-43.7z"
                    fill="#323333" p-id="2058"></path>
                </svg></i>
            </a>
            <a title="删除" href="javascript:;" onclick="cutOne(`{$item.id}`)">
              <i class="layui-icon">&#xe640;</i>
            </a>
          </td>
        </tr>
        {/foreach}
      </tbody>
    </table>

    <div class="page">
      {$configListstr}
    </div>

  </div>
</body>

<script>
  // 返回
  function back() {
    window.location.href = "{:url('admin/config/index')}"
  }

  layui.use('laydate', function () {
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
      elem: '#start' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#end' //指定元素
    });

  });

  // 单个删除
  function cutOne(id) {
    layer.confirm('确认要删除吗？', function (index) {
      layer.close(index);
      cut(id);
    })
  }

  // 批量删除
  function cutAll() {
    var ids = tableCheck.getData()
    layer.confirm('确认要删除吗？', function (index) {
      //将数组转换为字符串
      var data = ids.join(',');
      cut(data)
    })
  }

  // 调用删除方法
  function cut(data) {
    // 序列化 将对象转换为参数形式
    var params = {
      ids: data,
    }

    params = $.param(params);

    $.ajax({
      type: "POST",
      url: `{:url('admin/config/cut')}`,
      data: params,
      dataType: "json",
      success: function (data) {
        if (data.result) {
          // 成功
          layer.msg(data.msg, {
            icon: 1,
            time: 2000,
          }, function () {
            // 收藏成功刷新界面
            location.reload();
          })
        } else {
          // 失败
          layer.msg(data.msg);
        }
      }
    })
  }

  // 单个取消
  function recoveryOne(id) {
    layer.confirm('确认要恢复吗？', function (index) {
      layer.close(index);
      recovery(id);
    })
  }

  // 批量取消
  function recoveryAll() {
    var ids = tableCheck.getData()
    layer.confirm('确认要恢复吗？', function (index) {
      //将数组转换为字符串
      var data = ids.join(',');
      recovery(data)
    })
  }

  // 调用删除方法
  function recovery(data) {
    // 序列化 将对象转换为参数形式
    var params = {
      ids: data,
    }

    params = $.param(params);

    $.ajax({
      type: "POST",
      url: `{:url('admin/config/recovery')}`,
      data: params,
      dataType: "json",
      success: function (data) {
        console.log(data);
        if (data.result) {
          // 成功
          layer.msg(data.msg, {
            icon: 1,
            time: 2000,
          }, function () {
            // 收藏成功刷新界面
            location.reload();
          })
        } else {
          // 失败
          layer.msg(data.msg);
        }
      }
    })
  }

</script>

</html>